import React, { Component } from 'react'
import { Icon, InputItem, Popup, Stepper } from 'antd-mobile'

const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent)
let wrapProps
if (isIPhone) {
  // Note: the popup content will not scroll.
  wrapProps = {
    // onTouchStart: e => e.preventDefault(),
  }
}

export default class DepositDark extends Component {
  constructor() {
    super()
    this.popup = this.popup.bind(this)
  }
  render() {
    return (
      <div className={`rt-deposit-dark-container`}>
        <div className={`rt-navbar-box`}>
          <div>
            <Icon type="left" />
          </div>
          <span>充值</span>
        </div>

        <div className={`rt-account-balance`}>
          <div className={`rt-text`}>账户余额（元）</div>
          <div>323,686.90</div>
        </div>

        <p className={`rt-account`}>帐户名称：13000007893</p>

        <p className={`rt-choose-pay-way`}>选择支付方式：</p>

        <div className={`rt-payment-box`}>
          <div className={`rt-payment -active`}>
            <img alt="wechat" src={require('static/images/wechat.png')} />
            <div className={`cm-right-angle-trangle-box`}>
              <div className={`cm-tick-box -hide`}></div>
            </div>
          </div>
          <div className={`rt-payment`}>
            <img alt="online" src={require('static/images/union.png')} />
          </div>
        </div>

        <InputItem
          className={`rt-dark-input`}
          placeholder="请输入充值金额（大于0.02）"
          extra="元"
        />

        <div
          className={`rt-op-btn`}
          onClick={this.popup}
        >
          立即充值
        </div>
        
        
        <div className={`top-broadcast-modal`}>
          <div className={`top-op-box`}>
            <span className={`top-up-btn`}>买涨</span>
            <div>
              <span>微白银</span>
              <span className={`top-price`}>3971</span>
            </div>
            <span>买跌</span>
          </div>

          <div className={`top-goods-list`}>
            <div className={`top-goods -active`}>
              <span>0.1KG</span>
              <span>8元／手</span>
            </div>
            <div className={`top-goods`}>
              <span>3KG</span>
              <span>250元／手</span>
            </div>
            <div className={`top-goods`}>
              <span>10KG</span>
              <span>700元／手</span>
            </div>
          </div>
          <div className={`cm-demo`}>
            <span>手数</span>
            <div className={`cm-rest`}>
              <span className={`cm-quick-select -active`}>1</span>
              <span className={`cm-quick-select`}>5</span>
              <span className={`cm-quick-select -adjust`}>10</span>
                <Stepper
                  className="cm-stepper-custom -padding"
                  showNumber
                  max={10}
                  min={0}
                  step={1}
                  readOnly={false}
                  />
              </div>
            </div>
            <div className={`cm-demo`}>
              <span>止盈</span>
              <div className={`cm-rest`}>
                <Stepper
                  className="cm-stepper-custom"
                  showNumber
                  max={10}
                  min={0}
                  step={1}
                  readOnly={false}
                  />
                <span className={`cm-per-cent`}>％</span>
              </div>
            </div>
            <div className={`cm-demo`}>
              <span>止损</span>
              <div className={`cm-rest`}>
                <Stepper
                  className="cm-stepper-custom"
                  showNumber
                  max={10}
                  min={0}
                  step={1}
                  readOnly={false}
                  />
                <span className={`cm-per-cent`}>％</span>
              </div>
            </div>
            <div className={`top-tip-message`}>
              默认按实时价格成交，是否持仓过夜，建仓后可手动修改
            </div>
            <div className={`top-account-box`}>
              <div className={`top-left`}>
                <span>可用余额</span>
                <strong>3,686.90元</strong>
              </div>
              <div className={`top-right`}>
                <span>充值</span>
              </div>
            </div>
            <div className={`top-confirm-box`}>
              <div className={`top-rest`}>
                <span className={`top-left`}>¥ 8.00</span>
                <span>手续费<strong>8.00元</strong></span>
              </div>
              <span>确认</span>
            </div>
        </div>

      </div>
    )
  }
  popup() {
    Popup.show(
      <div className={`top-broadcast-modal`}>
        <div className={`top-op-box`}>
          <span className={`top-up-btn`}>买涨</span>
          <div>
            <span>微白银</span>
            <span className={`top-price`}>3971</span>
          </div>
          <span>买跌</span>
        </div>

        <div className={`top-goods-list`}>
          <div className={`top-goods -active`}>
            <span>0.1KG</span>
            <span>8元／手</span>
          </div>
          <div className={`top-goods`}>
            <span>3KG</span>
            <span>250元／手</span>
          </div>
          <div className={`top-goods`}>
            <span>10KG</span>
            <span>700元／手</span>
          </div>
        </div>
        <div className={`cm-demo`}>
          <span>手数</span>
          <div className={`cm-rest`}>
            <span className={`cm-quick-select -active`}>1</span>
            <span className={`cm-quick-select`}>5</span>
            <span className={`cm-quick-select -adjust`}>10</span>
              <Stepper
                className="cm-stepper-custom -padding"
                showNumber
                max={10}
                min={0}
                step={1}
                readOnly={false}
                />
            </div>
          </div>
          <div className={`cm-demo`}>
            <span>止盈</span>
            <div className={`cm-rest`}>
              <Stepper
                className="cm-stepper-custom"
                showNumber
                max={10}
                min={0}
                step={1}
                readOnly={false}
                />
              <span className={`cm-per-cent`}>％</span>
            </div>
          </div>
          <div className={`cm-demo`}>
            <span>止损</span>
            <div className={`cm-rest`}>
              <Stepper
                className="cm-stepper-custom"
                showNumber
                max={10}
                min={0}
                step={1}
                readOnly={false}
                />
              <span className={`cm-per-cent`}>％</span>
            </div>
          </div>
          <div className={`top-tip-message`}>
            默认按实时价格成交，是否持仓过夜，建仓后可手动修改
          </div>
          <div className={`top-account-box`}>
            <div className={`top-left`}>
              <span>可用余额</span>
              <strong>3,686.90元</strong>
            </div>
            <div className={`top-right`}>
              <span>充值</span>
            </div>
          </div>
          <div className={`top-confirm-box`}>
            <div className={`top-rest`}>
              <span className={`top-left`}>¥ 8.00</span>
              <span>手续费<strong>8.00元</strong></span>
            </div>
            <span>确认</span>
          </div>
      </div>,
      { animationType: 'slide-up', wrapProps, maskClosable: true }
    )
  }
}